<template>
	<view>
		<u-popup id="popup-box1" :show="showGlobalPopup" mode="center" bgColor="transparent"
			:closeOnClickOverlay="false" @close="closeGlobalPopup">
			<!-- 自定义弹窗 -->
			<template>
				<view
					style="height: 300px;width: 300px;max-width: 80vw;border-radius: 8px;overflow: hidden;background-color: #fff;"
					class="f-dc">
					<u-navbar leftText="选择审批流" leftIconColor="#fff" leftIcon=" " @rightClick="closeGlobalPopup"
						:fixed="false" :autoBack="false" :safeAreaInsetTop="false" rightIcon="close"
						rightIconColor="#fff">
					</u-navbar>

					<view style="flex: 1;overflow: auto;padding-top: 6px;">
						<u-radio-group v-model="choiceRadio" placement="column" iconPlacement="right" borderBottom
							@change="changeRadio">
							<u-radio v-for="(item,index) in radioData" :key="index" :customStyle="{padding: '10px'}"
								activeColor="#51d0d0" :label="item.BillName" :name="item.APFlowID"></u-radio>
						</u-radio-group>

					</view>

					<view class="x-ec" style="padding: 10px;">
						<button style="margin-right: 4px;" size="mini" class="content_bottom_primary_plainBtn"
							@click="openView">预览</button>

						<button style="margin-right: 4px;" class="content_bottom_primary_Btn" size="mini"
							:disabled="!enabledSubmitBtn" @click="cubmitConfig">确定</button>
					</view>

				</view>
			</template>
		</u-popup>


		<!-- 预览 -->
		<u-popup id="popup-box1" :show="showViewPopup" mode="center" bgColor="transparent" overlayOpacity="0.1"
			:closeOnClickOverlay="false" @close="showViewPopup = false">
			<view class="f-dc"
				style="min-width: 300px;max-width: 80vw;max-height: 80vh;border-radius: 8px;overflow: hidden;min-height: 40vh;background-color: #fff;">
				<u-cell title="发起审批" style="background-color: #51d0d0;" :titleStyle="{color: '#fff',fontSize: '12px'}">
					<template slot="right-icon">
						<view @click="showViewPopup = false">
							<u-icon name="close" color="#fff" size="16"></u-icon>
						</view>
					</template>
				</u-cell>

				<mFlowCharts ref="flowCharts" style="flex: 1;overflow: auto;" :option="flowChartData">
				</mFlowCharts>

				<view class="x-ec" style="width: 100%;height: 60px;border-top: 1px solid #e8e8e8;">
					<button class="content_bottom_primary_plainBtn CommonBtnSize" size="mini"
						@click="showViewPopup = false;enabledSubmitBtn=true" style="margin-right: 8px;">取消</button>

					<button class="content_bottom_primary_Btn CommonBtnSize" :disabled="!enabledSubmitBtn" size="mini"
						@click="cubmitConfig" style="margin-right: 8px;">确定</button>
				</view>

			</view>
		</u-popup>


		<!-- 图片预览s -->
		<m-previewImage ref="previewImage" mode="widthFix" :urls="imagesPreview"></m-previewImage>
	</view>
</template>

<script>
	import mApproveList from '@/uni_modules/mc-ui/components/m-node-warp/compontent/m-approveList/m-approveList.vue';
	import mFlowCharts from '@/uni_modules/mc-ui/components/m-node-warp/compontent/m-flow-chart/m-flow-chart.vue';

	export default {
		name: "mGlobalPopup",
		components: {
			mApproveList,
			mFlowCharts
		},
		data() {
			return {
				choiceRadio: null,

				showViewPopup: false, //预览
				flowChartData: {},
				imagesPreview: [],
				approveInfo: {},
				enabledSubmitBtn: true, // 控制按钮点击

				// #ifdef APP-PLUS
				eventChannel: null
				// #endif
			}
		},
		created() {
			if (this.radioData.length) {
				this.approveInfo = this.radioData[0];
				this.choiceRadio = this.radioData[0].APFlowID;
			}

			// #ifdef APP-PLUS
			this.eventChannel = this.getOpenerEventChannel();
			// #endif
		},

		computed: {
			showGlobalPopup() {
				return this.$store.state.st_comPageConfig.showGlobalPopup;
			},
			radioData() {
				return this.$store.state.BaseScreenParm.option || [];
			},
			globalData() {
				return this.$store.state.BaseScreenParm.globalData || {};
			},
			keyData() {
				return {
					keyName: this.$store.state.BaseScreenParm.keyName,
					keyValue: this.$store.state.BaseScreenParm.keyValue,
				}
			},
		},
		beforeDestroy() {
			this.eventChannel.emit("cancel");
		},
		methods: {
			changeRadio(data) { // 审批流选项切换
				let findData = this.radioData.find(i => i.APFlowID == data);
				this.approveInfo = findData;
			},
			openPreview(data, index) { // 预览图片
				let that = this;
				this.imagesPreview = data || [];
				if (data.length) {
					this.$refs.previewImage.open(data[index]);
				}
			},
			openView() { // 预览

				if (uni.$m.utils.isEmpty(this.choiceRadio)) {
					return uni.$m.utils.msg('请选择审批流');
				}

				let findData = this.radioData.find(i => i.APFlowID == this.choiceRadio);

				if (findData) {

					this.flowChartData = JSON.parse(findData.AppConfigStr);
					this.showViewPopup = true;
				}
			},
			cubmitConfig() { // 确认审批流
				let that = this;
				if (!that.enabledSubmitBtn) return;
				that.enabledSubmitBtn = false;
				let param = {
					approveType: 0,
					tableName: this.globalData.physicalTableName,
					keyName: this.keyData.keyName,
					keyId: this.keyData.keyValue,
					APFlowID: this.approveInfo.APFlowID,
					userId: this.$store.state.UserInfo.UserID,
					title: this.approveInfo.BillName
				}

				this.post('', param, function(data) {
					// if (data.ds.length && data.ds[0].status) {}
					uni.showToast({
						title: data.ds[0].msg,
					})
					// 关闭弹层
					that.closeGlobalPopup('confirm');
				}, function(err) {
					console.log(err)
				})

			},
			post(sql, param, callBack) {
				param["sql"] = sql;
				if (this.Request.getUserInfo()) {
					if (!param.hasOwnProperty("P_UserID")) {
						param.P_UserID = this.Request.getUserInfo().UserID;
					}
					if (!param.hasOwnProperty("P_UserName")) {
						param.P_UserName = this.Request.getUserInfo().UserName;
					}
					if (!param.hasOwnProperty("P_UserCode")) {
						param.P_UserCode = this.Request.getUserInfo().UserCode;
					}
				}
				this.Request.requestByUrl("/Approve/BgApproval", param, function(data) {
					callBack(data);
				}, function(err) {
					console.log(err)
				});
			},
			closeGlobalPopup(type = 'cancel') { // 关闭弹层
				this.hide(type);

			},
			// 弹窗关闭后需要重置popupConfig数据
			hide(type) {
				let _this = this;
				// 关闭弹窗
				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'st_comPageConfig.showGlobalPopup',
					data: true
				})
				setTimeout(() => {
					_this.$store.commit('ChangeAndSetStateData', {
						Name1: 'st_comPageConfig.showGlobalPopup',
						data: false
					})

					// uni.navigateBack();

					uni.navigateBack({
						delta: 1,
						success() {
							_this.eventChannel.emit(type);
						}
					})
				}, 100) // 这里时间就是弹窗显示隐藏动画时间
			}
		}
	}
</script>

<style>
	page {
		background: transparent;
	}
</style>

<style lang="scss" scoped>
	.popup-box {
		width: 420rpx;
		min-height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
		background: #fff;
		border-radius: 20rpx;

		.title {
			font-size: 40rpx;
			font-weight: 600;
			margin-top: 26rpx;
		}

		.content {
			font-size: 30rpx;
			margin: 20rpx 0;
			text-align: center;
		}

		.btn-box,
		.btn {
			display: flex;
			justify-content: center;
			align-items: center;

			.btn-one {
				width: 300rpx;
				height: 76rpx;
				background: $uni-color-primary;
				color: #fff;
				border-radius: 38rpx;
			}

			.btn-two {
				width: 206rpx;
				height: 76rpx;
				border-radius: 38rpx;
				margin: 0 20rpx;
				background: #fff;
			}
		}
	}

	.modal-box {
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;

		.modal-top {
			width: 420rpx;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.modal-title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.modal-content {
				font-size: 30rpx;
				margin-top: 20rpx;
				text-align: center;
				color: #333333;
			}
		}

		.modal-btn {
			border-top: 1rpx solid #eee;
			display: flex;

			.item {
				font-size: 32rpx;
				width: 250rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #666666;
				font-weight: 600;
			}

			.active {
				color: $uni-color-primary;
			}
		}
	}

	.rich-box {
		max-width: 750rpx;
		overflow: hidden;
	}
</style>